<!DOCTYPE html>
<html lang="zh-cn">
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <#include "/common/meta.ftl"/>
	    <#include "/common/form.ftl"/>
	    <link rel="stylesheet" href="${_b}/static/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
	    <script type="text/javascript" src="${_b}/static/zTree_v3/js/jquery.ztree.all.js"></script>
		<script>
			var setting = {
				async: {
					enable: true,
					url: "./applicationTree"
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				callback: {
					onClick: function(event, treeId, treeNode){
						$("#appPID").val(treeNode.id);
						$("#appPID_V").val(treeNode.name);
						hideMenu();
					}
				}
			};
			$(function(){
				$("#form").validate({
					rules: {
						appName: {required:true,maxlength:128},
					    appPID_V : {required:true},
						appOrder : {required:true,number:true,maxlength:9},
					},
					errorElement: "div",
					errorPlacement: function(error, element) {
						error.appendTo($(element).parent());
						$(element).parent().addClass("has-error");
						$(error).addClass("help-block alert-danger");
					},
					success: function(label) {
						$(label).parent().removeClass("has-error");
						$(label).remove();
					}
				})
			});
			function save(){
				//注意：还得调一下这个方法。。。不知道为啥remote第一次不验证 2016-02-26
				$("#form").validate();
				//alert($("#form").valid());
				$('#form').ajaxSubmit({
					beforeSubmit : function(a,f,o) {
						return $("#form").valid();
					},
					success : function(data) { // data 保存提交后返回的数据，一般为 json 数据
						var json = JSON.parse(data); //由JSON字符串转换为JSON对象
					    var flag = json.success;
					    if(flag){
			                var msg = new top.$.zui.Messager('提示消息：保存成功！', {
			                	type : 'success',
			                	fade : true,
			                	//placement : 'bottom-right',
			                	icon : 'ok-sign',
			                	time : 3000,
			                	scale : true
			                });
			                msg.show();
		                }
		                if(json.obj){//说明是添加成功
		                	$("#appID").val(json.obj);
		                }
		                var zTree = parent.$.fn.zTree.getZTreeObj("appTree");
                  			zTree.reAsyncChildNodes(null, "refresh");
		            }
				}); 
			}
			function showMenu() {
				$.fn.zTree.init($("#appTreeForSelect"), setting);
				var cityObj = $("#appPID_V");
				var cityOffset = $("#appPID_V").offset();
				$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() - 8 + "px"}).slideDown("fast");
	
				$("body").bind("mousedown", onBodyDown);
			}
			function hideMenu() {
				$("#menuContent").fadeOut("fast");
				$("body").unbind("mousedown", onBodyDown);
			}
			function onBodyDown(event) {
				if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
					hideMenu();
				}
			}
			function add(){
				var zTree = parent.$.fn.zTree.getZTreeObj("appTree");
		    	var node = zTree.getSelectedNodes()[0];
		    	if(node){
		    		location.href ="./appForm?appPID="+node.id;
		    	}else{
		    		location.href ="./appForm";
		    	}
			}
			function deleteOne(){
				var name = $("#appName").val();
				var id = $("#appID").val();
				if(confirm("您确定要删除栏目【"+name+"】吗？")){
					$.post('./applicationDelete', {appID : id}, function(result) {
						if(result.success){
							var zTree = parent.$.fn.zTree.getZTreeObj("appTree");
		               		var node = zTree.getSelectedNodes()[0];
		               		zTree.removeNode(node);
							var msg = new top.$.zui.Messager('提示消息：删除成功', {
				                	type : 'success',
				                	fade : true,
				                	icon : 'ok-sign',
				                	time : 3000,
				                	scale : true
					    	});
							msg.show();
							location.href ="./appForm?appID=00";
						}
					},'json');
				}
			}
			function deleteCascade(){
				var name = $("#appName").val();
				var id = $("#appID").val();
				if(confirm("提示：该操作将删除【"+name+"】及下属所有子栏目！\r\n您确定要删除栏目【"+name+"】及其子栏目吗？")){
					$.post('./deleteAppCascade', {appID : id}, function(result) {
						if(result.success){
							var zTree = parent.$.fn.zTree.getZTreeObj("appTree");
		               		var node = zTree.getSelectedNodes()[0];
		               		zTree.removeNode(node);
							var msg = new top.$.zui.Messager('提示消息：删除成功！', {
			                		type : 'success',
				                	fade : true,
				                	icon : 'ok-sign',
				                	time : 3000,
				                	scale : true
					    	});
							msg.show();
							location.href ="./appForm?appID=00";
						}
					},'json');
				}
			}
		</script>
	</head>
	<body style="overflow-x:hidden;">
		<div id="menuContent" class="menuContent" style="display:none; position: absolute;z-index:1000000000000;">
			<ul id="appTreeForSelect" class="ztree form-control" style="margin-top:0;margin-top: 10px;overflow-y:scroll;height:290px;background: #f0f6e4;padding-right:20px;width:200px;"></ul>
		</div>
		<div class="panel panel-primary">
			<div class="panel-heading" style="">
				<strong>
				<#if (appID!'')!=''><i class="icon-pencil"></i> 编辑<#else><i class="icon-plus"></i> 添加</#if>应用
				</strong>
			</div>
			<div class="panel-body" style="padding:5px;">
			<form id="form" class="form-horizontal " role="form" method='post' action="./applicationSave">
			<input id="appID" name="appID" type="hidden" value="${appData.appID!''}"/>
				<input id="appLevel" name="appLevel" type="hidden" value="${appData.appLevel!''}"/>
				<div class="form-group">
		          	<div class="col-md-10">
		             	<button class="btn btn-primary" onclick="save();" type="button"><i class="icon icon-save"></i> 保存</button>
		             	<#if (appID!'')!=''>
		             		<#if !hasChildren>
		             		<button class="btn btn-danger" onclick="deleteOne();" type="button"><i class="icon icon-trash"></i> 删除</button>
		             		<#elseif (appID!'')!='00'>
		             		<button class="btn btn-danger" onclick="deleteCascade();" type="button"><i class="icon icon-trash"></i> 删除其及子应用</button>
		             		</#if>
		             		<button class="btn btn-success" onclick="add();" type="button"><i class="icon icon-plus"></i> 添加新应用</button>
		             	</#if>
		             	
		          	</div>
		        </div>
        		<div class="form-group" >
          			<label class="col-sm-2 control-label required" >应用名称</label>
	          		<div class="col-sm-3">
	             		<input type='text' id="appName" name="appName" value='${appData.appName!''}' class='form-control' placeholder=''/>
	          		</div>
        		</div>
        		<div class="form-group">
          			<label class="col-sm-2 control-label" >应用英文名</label>
	          		<div class="col-sm-3">
	             		<input type='text'  name="appEName" id='appEName' value='${appData.appEName!''}' class='form-control' placeholder=''/>
	          		</div>
	          		
        		</div>
        		 
        		<div class="form-group">
          			<label class="col-sm-2 control-label required" >上级应用</label>
	          		<div class="col-sm-3">
	          			<input type="hidden" id="appPID" name="appPID" value="${appData.appPID!''}"/>
	             		<input type='text' id='appPID_V' name="appPID_V" readonly onclick="showMenu(); return false;" value='<#if parentAppName?exists>${parentAppName!''}<#else>顶级</#if>' class='form-control' placeholder=''/>
	          		</div>
	          	</div>	
	        
        		
        		<div class="form-group">
          			<label class="col-sm-2 control-label required" >类型</label>
	          		<div class="col-sm-2">
	             		<select name='appType' id='appType' class='form-control'>
	             			<#assign o = 10/>
	             			<#if appData.appType?exists>
	             				<#assign o = appData.appType/>
	             			</#if>
			            	<option value="1" <#if o==1>selected</#if>>后台应用</option>
							<option value="2" <#if o==2>selected</#if>>业务应用</option>
			            </select>
	          		</div>
        		</div>
        		<div class="form-group">
          			<label class="col-sm-2 control-label" >应用链接</label>
	          		<div class="col-sm-4">
	             		<input type='text'  name="appURL" id='appURL' value='${appData.appUrl!''}' class='form-control' placeholder=''/>
	          		</div>
	          		
        		</div>
        	<div class="form-group">
          			<label class="col-sm-2 control-label" >应用图标</label>
	          		<div class="col-sm-4">
	             		<input type='text'  name="appIcon" id='appIcon' value='${appData.appIcon!''}' class='form-control' placeholder=''/>
	          		</div>
	          		
        		</div>
        		 	<div class="form-group">
	          		<label class="col-sm-2 control-label required" >排序</label>
	          		<div class="col-sm-2">
	             		<input type='text' name='appOrder' id='appOrder' value='${appData.appOrder!'10'}' class='form-control' placeholder=''/>
	          		</div>
        		</div>
        		<div class="form-group">
          			<label class="col-sm-2 control-label " style="font-family: '微软雅黑';">备注</label>
	          		<div class="col-sm-6">
	             		<input type='text' name='appMemo' id='appMemo' value='${appData.appMemo!''}' class='form-control' placeholder=''/>
	          		</div>
        		</div>
        		
        	</form>
		  	</div>
		</div>
	</body>
</html>